<script lang="jsx" setup>
import { inject, ref } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { REQU, toFormData, useResp } from '@/net/requ.js';
import { groupTypeOptions } from '@/util/const.js';
import GroupModal from './components/group-modal.vue';
import { toDic, optsToDic } from '@/util/index.js';

const auth = inject('auth');

const orgList = ref([]);

const columns = ref([
  {
    title: '组名',
    dataIndex: 'groupName',
  },
  {
    title: '分组类别',
    dataIndex: 'type',
    customRender: ({ text }) => R.prop(text, optsToDic(groupTypeOptions)),
  },
  {
    title: '所属机构',
    dataIndex: 'orgId',
    customRender: ({ text }) => R.compose( R.propOr('--', R.__, toDic(['id', 'name'], orgList.value)) )(text),
  },
  {
    fixed: 'right',
    width: 160,
    title: '操作',
    customRender: ({ record }) => (
      <div class="op-btns icon">
        <Button
          type="link"
          onClick={() => useGroupModal(record)}>
          {{
            icon: () => <EditOutlined />,
            default: () => '编辑',
          }}
        </Button>
        <Button
          type="link"
          style="color: rgb(200,0,0);"
          onClick={() => Modal.confirm({
            content: '确定删除此分组？',
            cancelText: '取消',
            okText: '确定',
            onOk: () => delGroup(record.id.toString()),
          })}>
          {{
            icon: () => < DeleteOutlined />,
            default: () => '删除',
          }}
        </Button>
      </div>
    ),
  },
]);

const dataSource = ref([]);

function getGroupList() {
  return REQU(`/api/group/treeList`)
  .then(useResp({
    succ: result => {
      dataSource.value = R.transduce( R.map(R.prop('children')), R.concat, [], result.data );
    }
  }))
}

function delGroup(ids) {
  return REQU('/api/group/delete', {
    method: 'POST',
    body: toFormData({ ids }),
  })
  .then(useResp({
    succ: result => {
      message.success('删除成功');
      getGroupList();
    },
    fail: result => {
      message.error(result?.message || '删除失败');
    },
  }));
}

function getOrgTreeList() {
  return REQU(`/api/org/treeList`)
  .then(useResp({
    succ: result => {
      orgList.value = result.data;
    },
  }));
}

const groupModalProps = ref({ visible: false });

function useGroupModal(row) {
  Object.assign(groupModalProps.value, { row }, { visible: true });
}

function main() {
  getGroupList();
  getOrgTreeList();
}

main();
</script>

<template>
  <div class="simple">
    <a-button
      v-if="auth"
      type="primary"
      @click="() => useGroupModal()">
      + 新建分组
    </a-button>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      :scroll="{ x: 1360 }"
      :pagination="false"
    >
    </a-table>

    <group-modal
      v-if="groupModalProps.visible"
      v-model:visible="groupModalProps.visible"
      :row="groupModalProps.row"
      @ok="() => getGroupList()">
    </group-modal>
  </div>
</template>
